<template>
    <div class="last-appoint-entry">
        <Modal
                class="last-appoint-modal"
                width="1100px"
                v-model="myVisible"
                title="录入"
        >
            <Form ref="formInline" :model="formInline" :rules="ruleInline"  :label-width="100" inline>
                <div>
                    <FormItem label="疫苗名称">
                        <Input v-model="vaccineName" placeholder="输入疫苗名称" disabled></Input>
                    </FormItem>
                    <FormItem label="剂次">
                        <Input v-model="doseValue" placeholder="" disabled></Input>
                    </FormItem>
                </div>
                <div>
                    <FormItem label="疫苗厂家" >
                        <Input v-model="formInline.vaccinecompany" placeholder=""></Input>
                    </FormItem>
                    <FormItem label="疫苗批号">
                        <Input v-model="formInline.batchno" placeholder=""></Input>
                    </FormItem>
                </div>
                <div>
                    <FormItem label="疫苗效期">
                        <DatePicker type="date" placeholder="请选择" v-model="formInline.vilidate" format="yyyyMMdd"></DatePicker>
                    </FormItem>
                    <FormItem label="接种日期"  prop="inotime">
                        <DatePicker type="date" placeholder="请选择" v-model="formInline.inotime" format="yyyyMMdd"></DatePicker>
                    </FormItem>
                </div>
                <div>
                    <FormItem label="接种部位">
                        <Input v-model="formInline.position" placeholder=""></Input>
                    </FormItem>
                    <FormItem label="接种医生">
                        <Input v-model="formInline.doctor" placeholder=""></Input>
                    </FormItem>
                </div>
                <div>
                    <FormItem label="接种医院">
                        <Input v-model="formInline.inocompany" placeholder=""></Input>
                    </FormItem>
                </div>
            </Form>

            <div slot="footer">
                <Button type="primary" class="left-btn" @click="save('formInline')">保存</Button>
                <Button class="right-btn" @click="myVisible=false">取消</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    import {saveino} from '@/api/inoculate/inoculate';

    export default {
        props: {
            visible: Boolean,
            entryInfo: Object,
            babytype: Number
        },
        computed:{
            turnId(){
                return this.$route.query.turnId;
            },
            peopleid () {
                return this.$route.query.peopleid;
            }
        },
        data () {
            return {
                myVisible: this.modalVisible,
                myVisible1: false,

                vaccineName:'',
                doseValue:'',
                formInline:{
                    id:'',  // 订单id
                    planid:'',  // 循环的id
                    babytype:null,
                    vaccinecompany: '',
                    batchno: '',
                    vilidate: '',
                    inotime: '',
                    position: '',
                    doctor: '',
                    inocompany: '',
                },
                ruleInline:{
                    inotime: [
                        { required: true, type: 'date', message: '请选择接种日期', trigger: 'change' }
                    ]
                }
            }
        },
        watch: {
            myVisible: function (val) {
                console.log(val)
                this.$emit('update:visible', val);
                if(val==true){
                    this.vaccineName=this.entryInfo.vaccinename;
                    this.doseValue=this.entryInfo.dose;

                    this.formInline.vaccinecompany='';
                    this.formInline.batchno='';
                    this.formInline.vilidate='';
                    this.formInline.inotime='';
                    this.formInline.position='';
                    this.formInline.doctor='';
                    this.formInline.inocompany='';
                }
            },
            visible: function (val) {
                this.myVisible = val;
            }
        },
        methods:{
            save(name){
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.formInline.peopleid=this.peopleid;
                        this.formInline.id=this.turnId;
                        this.formInline.planid=this.entryInfo.id;
                        this.formInline.babytype=this.babytype;
                        let form=Object.assign(this.formInline);
                        if(this.formInline.vilidate){
                            form.vilidate=this.$moment(this.formInline.vilidate).format('YYYYMMDD');
                        }
                        form.inotime=this.$moment(this.formInline.inotime).format('YYYYMMDD');

                        saveino(form).then((res) => {
                            if(res.data.error==0){
                                this.myVisible=false;
                            }else{
                                this.$Message.error(res.data.message);
                            }
                        })
                    }
                })

            }
        }
    }
</script>

<style lang="less">
    .last-appoint-modal{
        .ivu-form-item{
            width:400px;
        }
    }
</style>
